<template>
  <div class="invest">
    <div class="invest-header">
      <comHeader
        pageTitle="出借"
        :isBack="false"></comHeader>
    </div>
    <div class="invest-tab">
      <ul>
        <li 
          v-for="(tab, index) in tabs" 
          @click="handleClick(index)"
          key="index"
          :class="{isCurrent: index === currentTab ? true : false}">{{ tab }}</li>
      </ul>
    </div>
    <div class="invest-content">
      <keep-alive>
        <component :is="currentView"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
  import comHeader from 'components/common/comHead'
  import goodlist from 'components/goodlist'

  const yyGoodList = {
    template: '<goodlist borrowProductType="6"></goodlist>',
    components: {
      goodlist
    }
  }

  const sxGoodList = {
    template: '<goodlist borrowProductType="7"></goodlist>',
    components: {
      goodlist
    }
  }

  export default {
    data () {
      return {
        currentTab: 0,
        currentView: yyGoodList,
        tabs: ['分秒月盈', '分秒省心']
      }
    },
    methods: {
      handleClick (index) {
        this.currentTab = index
        switch (index) {
          case 0:
            this.currentView = yyGoodList
            break
          case 1:
            this.currentView = sxGoodList
            break
          default:
            break
        }
      }
    },
    created () {
      document.body.style.overflow = ''
    },
    components: {
      comHeader,
      sxGoodList,
      yyGoodList
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .invest {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    &-header {
      flex: none;
    }
    &-tab {
      width: 100%;
      flex: none;
      box-shadow: 0 1px 2px 2px $base-e5e5e5;
      .isCurrent {
        font-size: 36px;
        color: $base-ff6c00;
      }
      ul {
        display: flex;
      }
      li {
        flex: 1;
        font-size: 30px;
        color: $base-333;
        text-align: center;
        height: 80px;
        line-height: 80px;
      }
    }
    &-content {
      flex: 1 1 auto;
      overflow: scroll;
      padding-bottom: 90px; // 太高content，防止tab挡住goodlist
      -webkit-overflow-scrolling: touch; // ios浏览器 滑动 卡
    }
  }
</style>
